<template>
  来自app的参数传递：{{ msg }},{{ who }}
  <br>
  <slot name="myspan"></slot>
  <br>
  <button @click="test">测试调用事件</button>
  <hr>
  <h1>人物信息</h1>
  <h2>vue2:{{  username }}</h2>
  <h2>{{  name }}</h2>
  <h2>{{  age }}</h2>
  <h2>{{  addr.city }}</h2>
  <button @click="say">说话</button>
  <button @click="v2say">说话v2</button><br>
  <button @click="changeAge">修改年龄</button>
</template>

<script>
// 引用函数 ref()
import {ref} from "vue"
//解决对象的引用问题
import {reactive} from "vue";

export default {
  name: 'Demo',
  props:['msg','who'],//参数
  emits:['show'],//事件参数
  slots:['myspan'],//标签体，插槽
  //vue2的习惯
  data(){
    return{
      username:"lisi"
    }
  },
  methods:{
    v2say(){
      console.log("v2写法");
    }
  },
  // vue3语法还是有点区别的，之前是属性，现在是变量
  setup(props,context){

    // console.log(context)
    let name="zhangsan"
    //修改方式 把值变成引用值，以后访问的是内存地址，需要导入
    let age= ref(19)
    // let addr=ref({
    let addr=reactive({
      city:"石家庄",
      info:"光华小区"
    })
    function test(){
      context.emit('show','值')
    }
    function say(){
      console.log(`我是${name},今年${age} `);
    }
    // 由于语法问题，这个age 变量是本地的变量，不能在修改后绑定修改模板中的值
    function changeAge(){
      // 由于之前使用ref()，所以age不是一个值，而是一个ref对象的引用
      // 有点类似于原始类型和引用类型的区别
      age.value=30;
      // age = 30 ;
      //对象类型的直接变成为被代理对象，proxy 的实例
      //但是这个写法，总得写个value操作起来很不科学解决这个问题，需要引用对象的函数
      // addr.value.city="邯郸"
      addr.city="上海"
      console.log(`${age}`)
    }
    //简写方式，name:name;
    return{
//        name:name,
      name,
      age,
      changeAge,
      addr,
      say,
      test
    }
  }
}
</script>
